<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>评价管理</title>
		<link rel="stylesheet" type="text/css" href="css/base/base_evaluation_management.css" />
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<!-- 评分 --><link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script src="js/base/highcharts.js"></script>
		<script src="js/base/exporting.js"></script>
		<script src="js/base/data.js"></script>
		<script src="js/base/highcharts-zh_CN.js"></script>
		<script src="js/jquery-1.9.1.js"></script>
		<script src="js/base/jquery.rating-stars.min.js"></script>
	</head>
	<body>
		<header>
			<!-- 头部暂时不用写 -->
		</header>
		<section>
			<!-- 评分、图表 -->
			<div id="synthesizeevaluate">
				<div>
					<div id="synthesizeevaluate-top">
						<img src="img/base/star.png" width="30px" height="30px" >
						<span>9.3</span>
						<span>综合评分</span>
					</div>
					<div id="synthesizeevaluate-bottom">
						<ul style="margin-bottom: 0;">
							<li>
								环境设施<span style="float: right;color: #FFBF44;">9.3</span>
								<div class="progress" style="height: 10px;">
																		 <!-- 使用EL表达式给width值的时候乘以10 -->
								    <div class="progress-bar bg-success" style="width:93%;"></div>
								</div>
							</li>
							<li>
								接待服务<span style="float: right;color: #FFBF44;">9.2</span>
								<div class="progress" style="height: 10px;">
								    <div class="progress-bar bg-success" style="width:92%;"></div>
								</div>
							</li>
							<li>
								课程设计<span style="float: right;color: #FFBF44;">8.7</span>
								<div class="progress" style="height: 10px;">
								    <div class="progress-bar bg-success" style="width:87%;"></div>
								</div>
							</li>
							<li>
								师资力量<span style="float: right;color: #FFBF44;">8.9</span>
								<div class="progress" style="height: 10px;">
								    <div class="progress-bar bg-success" style="width:89%;"></div>
								</div>
							</li>
						</ul>
					</div>
				</div>
				<div>
					<div id="container" style="width: 70%; height: 300px; margin: 0 auto"></div>
					<table id="datatable" hidden="hidden">
						<thead>
							<tr>
								<th></th>
								<th>学生</th>
								<th>老师</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th>环境设施</th>
								<td>2</td>
								<td>4</td>
							</tr>
							<tr>
								<th>接待服务</th>
								<td>5</td>
								<td>1</td>
							</tr>
							<tr>
								<th>课程设计</th>
								<td>1</td>
								<td>1</td>
							</tr>
							<tr>
								<th>师资力量</th>
								<td>2</td>
								<td>4</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<!-- 评价统计 -->
			<div id="evaluatestatistics">
				<p>评价统计</p>
				<ul>
					<li>
						<div>接待团体总数</div>
						<div>149</div>
					</li>
					<li>
						<div>接待学生人数</div>
						<div>68119</div>
					</li>
					<li>
						<div>接待教师人数</div>
						<div>4200</div>
					</li>
					<li>
						<div>参与评价人数</div>
						<div>58154</div>
					</li>
				</ul>
			</div>
			<!-- 评价详情 -->
			<div id="evaluateinfo">
				<p>评价详情</p>
				<div>
					<ul>
						<li>
							<div>
								<img class="evaluate-userheader" src="img/base/userheader.jpg" alt="">
								<span class="evaluate-username">憨八龟老王</span>
								<span class="evaluate-userschoolname">郑州市第一男同会所</span>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</div>
							<div>
								<p class="evaluate-usercomment">老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同</p>
							</div>
						</li>
						<li>
							<div>
								<img class="evaluate-userheader" src="img/base/userheader.jpg" alt="">
								<span class="evaluate-username">憨八龟老王</span>
								<span class="evaluate-userschoolname">郑州市第一男同会所</span>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</div>
							<div>
								<p class="evaluate-usercomment">老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同</p>
							</div>
						</li>
						<li>
							<div>
								<img class="evaluate-userheader" src="img/base/userheader.jpg" alt="">
								<span class="evaluate-username">憨八龟老王</span>
								<span class="evaluate-userschoolname">郑州市第一男同会所</span>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</div>
							<div>
								<p class="evaluate-usercomment">老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同</p>
							</div>
						</li>
						<li>
							<div>
								<img class="evaluate-userheader" src="img/base/userheader.jpg" alt="">
								<span class="evaluate-username">憨八龟老王</span>
								<span class="evaluate-userschoolname">郑州市第一男同会所</span>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</div>
							<div>
								<p class="evaluate-usercomment">老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同</p>
							</div>
						</li>
						<li>
							<div>
								<img class="evaluate-userheader" src="img/base/userheader.jpg" alt="">
								<span class="evaluate-username">憨八龟老王</span>
								<span class="evaluate-userschoolname">郑州市第一男同会所</span>
								<div class="rating-stars block" id="rating">
									<input type="hidden" readonly="readonly" class="form-control rating-value" name="rating-stars-value" id="rating-stars-value">
									<div class="rating-stars-container">
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
										<div class="rating-star">
											<i class="fa fa-star"></i>
										</div>
									</div>
								</div>
							</div>
							<div>
								<p class="evaluate-usercomment">老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同老王是男同</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</section>
		<footer>
			<!-- 尾部 -->
		</footer>
		
		<script type="text/javascript">
			// 柱状图
			var chart = Highcharts.chart('container', {
			    data: {
			        table: 'datatable'
			    },
			    chart: {
			        type: 'column'
			    },
				title: {
					text: '评价概览'
				},
			    yAxis: {
			        allowDecimals: false,
			        title: {
			            text: '',
			            rotation: 0
			        }
			    },
			    tooltip: {
			        formatter: function () {
			            return '<b>' + this.series.name + '</b><br/>' +
			                this.point.name.toLowerCase() + '评分：' + this.point.y+'分';
			        }
			    }
			});
			// 评分
			var ratingOptions = {
			    selectors: {
			        starsSelector: '.rating-stars',
			        starSelector: '.rating-star',
			        starActiveClass: 'is--active',
			        starHoverClass: 'is--hover',
			        starNoHoverClass: 'is--no-hover',
			        targetFormElementSelector: '.rating-value'
			    }
			};
			
			$(".rating-stars").ratingStars(ratingOptions);
		</script>
	</body>
</html>
